//声明全局变量
var index = 0, //当前显示图片的索引，默认值是0
    timer = null,
    bk = getById("bk"),
    menu = getById("menu"),
    prev = getById("banner-prev"),    //上一张
    next = getById("banner-next"),    //下一张
    banner = getById("menu_banner"),
    menuContent = getById("menu_content"),
    menuItems = menuContent.getElementsByClassName("menu__content-item"),
    subMenu = getById("sub_menu"),
    subMenuItem = subMenu.getElementsByClassName("menu__inner-box"),
    pics = banner.getElementsByClassName("menu__banner-slide"),
    dots = getById("dots").getElementsByTagName("span"),
    pictures=["url(\.\/image\/banner1\.jpg)",
        "url(\.\/image\/banner2\.jpg)",
        "url(\.\/image\/banner3\.jpg)",
        "url(\.\/image\/banner4\.jpg)",
        "url(\.\/image\/banner5\.jpg)",
        "url(\.\/image\/banner6\.jpg)",];
    size = pics.length;//图片数量
//封装getElementById()

function getById(id) {
    return typeof (id) === "string" ? document.getElementById(id) : id;
}

//事件兼容封装
var EventUtil = {
    addHandler: function (element, type, handler) {
        //绑定事件
        //chrome、firefox、IE9等 addEventListener
        //IE8以及IE8以下的浏览器  attachEvent
        if (element.addEventListener) {
            element.addEventListener(type, handler, false);
        } else if (element.attachEvent) {
            element.attachEvent("on" + type, handler);
        } else {
            element["on" + type] = null;
        }
    },
    removeHandler: function (element, type, handler) {
        //移除事件
        //chrome、firefox、IE9等 removeEventListener
        //IE8以及IE8以下的浏览器  detachEvent
        if (element.removeEventListener) {
            element.removeEventListener(type, handler, false);
        } else if (element.detachEvent) {
            element.detachEvent("on" + type, handler);
        } else {
            element["on" + type] = null;
        }
    },
    preventDefault: function (event) {
        if (event.preventDefault) {
            event.preventDefault();
        } else {
            event.returnValue = false;
        }
    },
    stopPropagation: function (event) {
        if (event.stopPropagation) {
            event.stopPropagation()
        } else {
            event.cancelBubble = true;
        }
    }
};
//点击下一张按钮显示下一张图片
EventUtil.addHandler(next, "click", function () {
    index++;
    if (index >= size) {
        index = 0
    }
    changeImage();
});
//点击上一张按钮显示上一张图片
EventUtil.addHandler(prev, "click", function () {
    index--;
    if (index < 0) {
        index = size-1
    }
    changeImage();
});

//修改图片显示
function changeImage() {
    for (var i = 0; i < size; i++) {
        pics[i].style.display = "none";
        dots[i].className = "";
        console.log(pics[i].style);
    }
    dots[index].className = "active";
    pics[index].style.display = "block";

    var pic = window.getComputedStyle(pics[index],null);

    bk.style.backgroundImage = pic.backgroundImage;

}

//点击小圆点切换图片
for (var i = 0; i < dots.length; i++) {

    //设置自定义属性当做下标索引
    dots[i].id = i;

    EventUtil.addHandler(dots[i], "click", function () {
        index = this.id;
        changeImage();
    })
}

//开始轮播
function startAutoPlay() {
    timer = setInterval(function () {
        index++;
        if (index >= size) {
            index = 0;
        }
        changeImage();
    }, 30000)
}

//清除定时器
function stopAutoPlay() {
    if (timer) {
        clearInterval(timer);
    }
}

//鼠标划过menu,停止轮播
EventUtil.addHandler(menu, "mouseover", stopAutoPlay);
//鼠标离开menu,停止轮播
EventUtil.addHandler(menu, "mouseout", startAutoPlay);

//鼠标划过主菜单，显示对应子菜单
for (var i = 0; i < menuItems.length; i++) {
    //自定义一个id属性
    menuItems[i].setAttribute("data-id", i);
    EventUtil.addHandler(menuItems[i], "mouseover", function () {
        var dataId = this.getAttribute("data-id");
        subMenu.className = "menu__sub-menu";
        for (var j = 0; j < subMenuItem.length; j++) {
            subMenuItem[j].style.display = "none";
            menuItems[j].style.background = "none"
        }
        resetMenuBg();
        subMenuItem[dataId].style.display = "block";
        menuItems[dataId].style.background = "#6a7176";
    })
}

//重置主菜单背景颜色
function resetMenuBg() {
    for (var i = 0; i < menuItems.length; i++) {
        menuItems[i].style.background = "none";
    }
}

//鼠标滑过主菜单
EventUtil.addHandler(subMenu, "mouseover", function () {
    subMenu.className = "menu__sub-menu";
});

EventUtil.addHandler(subMenu, "mouseout", function () {
    subMenu.className = "menu__sub-menu hide";
    resetMenuBg();
});

EventUtil.addHandler(banner, "mouseout", function () {
    subMenu.className = "menu__sub-menu hide";
    resetMenuBg();
});

EventUtil.addHandler(menuContent, "mouseout", function () {
    subMenu.className = "menu__sub-menu hide";
    resetMenuBg();
});

startAutoPlay();